<template>
  <div class="menu">
    <div class="distribution-center" @click="changeTab('distributionCenter')" :class="{check:position ==='distributionCenter'}"></div>
    <div class="my-distribution" @click="changeTab('myDistribution')" :class="{check:position ==='myDistribution'}"></div>
  </div>
</template>
<script>
export default {
  props: {
    position: {
      type: String,
      default: 'distributionCenter'
    }
  },
  data() {
    return {
    }
  },
  methods: {
    changeTab(tab) {
      if (tab === 'distributionCenter') {
        this.$router.replace('/distribution/')
      } else {
        this.$router.replace('/distribution/MyDistribution')
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.menu {
  position: fixed;
  bottom: 10vh;
  left: 50%;
  transform: translate(-50%, 0);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.menu>div{
  width: 68px;
  height: 68px;
}
.menu .check{
  width: 78px;
  height: 78px;  
}
.menu .distribution-center{  
  background: url(/static/img/d_home2.png);
  background-size: 68px 68px;
}
.menu .distribution-center.check{  
  background: url(/static/img/d_home1.png);
  background-size: 78px 78px;
}
.menu .my-distribution{  
  background: url(/static/img/d_user2.png);
  background-size: 68px 68px;
}
.menu .my-distribution.check{  
  background: url(/static/img/d_user1.png);
  background-size: 78px 78px;
}
</style>

